<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="back-icon" @click="goBack">
				<image src="/static/index/yuyue.png" mode="aspectFit"></image>
			</view>
			<view class="title">预约挂号</view>
		</view>
		<!-- 医院选择 -->
		<view class="section">
			<view class="section-title">选择医院</view>
			<picker mode="selector" :range="hospitals" @change="onHospitalChange">
				<view class="picker">
					{{ selectedHospital }}
					<image src="/static/index/arrow_down.png" mode="aspectFit"></image>
				</view>
			</picker>
		</view>
		<!-- 科室选择 -->
		<view class="section">
			<view class="section-title">选择科室</view>
			<picker mode="selector" :range="departments" @change="onDepartmentChange">
				<view class="picker">
					{{ selectedDepartment }}
					<image src="/static/index/arrow_down.png" mode="aspectFit"></image>
				</view>
			</picker>
		</view>
		<!-- 医生选择 -->
		<view class="section">
			<view class="section-title">选择医生</view>
			<picker mode="selector" :range="doctors" @change="onDoctorChange">
				<view class="picker">
					{{ selectedDoctor }}
					<image src="/static/index/arrow_down.png" mode="aspectFit"></image>
				</view>
			</picker>
		</view>
		<!-- 日期选择 -->
		<view class="section">
			<view class="section-title">选择日期</view>
			<picker mode="date" @change="onDateChange">
				<view class="picker">
					{{ selectedDate }}
					<image src="/static/index/arrow_down.png" mode="aspectFit"></image>
				</view>
			</picker>
		</view>
		<!-- 时间选择 -->
		<view class="section">
			<view class="section-title">选择时间</view>
			<picker mode="selector" :range="timeSlots" @change="onTimeChange">
				<view class="picker">
					{{ selectedTime }}
					<image src="/static/index/arrow_down.png" mode="aspectFit"></image>
				</view>
			</picker>
		</view>
		<!-- 确认预约按钮 -->
		<view class="confirm-button" @click="confirmAppointment">
			确认预约
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hospitals: ['医院 A', '医院 B', '医院 C'],
				selectedHospital: '医院 A',
				departments: ['内科', '外科', '妇产科'],
				selectedDepartment: '内科',
				doctors: ['医生甲', '医生乙', '医生丙'],
				selectedDoctor: '医生甲',
				selectedDate: this.getTodayDate(),
				timeSlots: ['09:00 - 09:30', '10:00 - 10:30', '14:00 - 14:30'],
				selectedTime: '09:00 - 09:30'
			};
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			onHospitalChange(e) {
				this.selectedHospital = this.hospitals[e.detail.value];
			},
			onDepartmentChange(e) {
				this.selectedDepartment = this.departments[e.detail.value];
			},
			onDoctorChange(e) {
				this.selectedDoctor = this.doctors[e.detail.value];
			},
			onDateChange(e) {
				this.selectedDate = e.detail.value;
			},
			onTimeChange(e) {
				this.selectedTime = this.timeSlots[e.detail.value];
			},
			confirmAppointment() {
				uni.showToast({
					title: '预约成功',
					icon: 'success'
				});
			},
			getTodayDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			}
		}
	};
</script>

<style scoped>
	/* 整体容器，采用 column 布局，垂直排列子元素 */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 导航栏，采用 row 布局，水平排列子元素 */
	.nav-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 50px;
		background-color: #007aff;
		color: white;
		padding: 0 10px;
	}

	.back-icon {
		width: 30px;
		height: 30px;
	}

	.back-icon image {
		width: 100%;
		height: 100%;
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 18px;
	}

	/* 每个选择区域，采用 column 布局，垂直排列子元素 */
	.section {
		display: flex;
		flex-direction: column;
		padding: 10px;
		border-bottom: 1px solid #ccc;
	}

	.section-title {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.picker {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		padding: 10px;
		border-radius: 5px;
	}

	.picker image {
		width: 20px;
		height: 20px;
	}

	/* 确认预约按钮 */
	.confirm-button {
		background-color: #007aff;
		color: white;
		text-align: center;
		padding: 15px;
		margin: 20px;
		border-radius: 5px;
	}
</style>